﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- InstanceBegin template="/Templates/ezdesk_app_template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- InstanceBeginEditable name="pageTitle" -->
    <title>易得桌面</title>
    <!-- InstanceEndEditable -->
    <link href="Content/jquery-ui.custom.css" rel="stylesheet" type="text/css" />
    <link href="Content/ui.textbox.css" type="text/css" rel="stylesheet" media="all" />
    <link href="Content/freecontent.css" rel="stylesheet" type="text/css" />
    <link href="Content/wdatepicker.css" rel="stylesheet" type="text/css" />
    <link href="Content/ajaxbusy.css" rel="stylesheet" type="text/css" />
    <link href="Content/Site.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/ezdesk_mockdata.js" type="text/javascript"></script>
    <script src="Scripts/jquery.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui.custom.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery.form.js" type="text/javascript"></script>
    <script src="Scripts/ui.textbox.js" type="text/javascript"></script>
    <script src="Scripts/pinyin.js" type="text/javascript"></script>
    <script src="Scripts/ezdesk-jquery-ui.js" type="text/javascript"></script>
    <script src="Scripts/ezdesk_common.js" type="text/javascript"></script>
</head>
<!-- InstanceBeginEditable name="pageStyles" -->
<style type="text/css">
    .cmbConfirmOrNot
    {
        font-size: 14px;
        color: #999;
    }
    
    #replyInfo
    {
        background-color: #F0F5F8;
        background-repeat: no-repeat;
        clear: both;
        word-wrap: break-word;
        min-height: 50px;
        margin-bottom: 2px;
        width: 100%;
    }
</style>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="pageScripts" -->
<script type="text/javascript">
    //************* URL常量

    var URL_MESSAGE_CONFIRMMESSAGE = '/message/ConfirmMessage';
    var URL_MESSAGE_REPLYTOPIC = '/message/ReplyTopic';
    var URL_MESSAGE_REPLYSINGLEMESSAGE = '/message/ReplySingleMessage';

    //************* 全局变量

    var g_Var = {
        'currentTime': null,
        'messageId': null,
        'toReplyName': null,
        'confirmNameList': null,
        'notConfirmNameList': null,
        'currentUserID': null
    };

    //************* 常量定义

    //************* Accessor访问器

    var EzAccessor = {};

    if (ezmock.IS_MOCKED) {
        var mock_currentTime = { "CurrentTime": 1348423559 };
        var mock_currentUser =
            {
                "Id": "55555",
                "Name": "加菲盐",
                "UserName": "yuxin",
                "Dept":
                    {
                        "Id": "bd3474a8-6c2d-43ef-bf42-b06827a216f6",
                        "DeptName": "软件工程",
                        "GroupId": "9ad96dac-88d8-4315-bfdb-9931c8f3cb7c"
                    }

            };

        var mock_message =
            {
                "Id": "33333",
                "NeedConfirm": false,
                "HasConfirmed": false,
                "SenderUser": {
                    "Id": "33333",
                    "Name": "加菲盐",
                    "UserName": "yuxin",
                    "Dept":
                        {
                            "Id": "bd3474a8-6c2d-43ef-bf42-b06827a216f6",
                            "DeptName": "软件工程",
                            "GroupId": "9ad96dac-88d8-4315-bfdb-9931c8f3cb7c"
                        }

                },
                "CreateOn": "1348423559",
                "Title": "发牢骚。",
                "MemberString": null,
                "Text": '&nbsp;&nbsp; &nbsp;<span><strong><span style="color:#000033;"> &nbsp;8月的尾巴了。2010年3月，美丽开始做DOTA的解说，4月，慢慢进入大家的视线。1。每天11：00点前睡觉，每天6：30点前起床 2。每天提醒自己，不要忘记梦想  3。多锻炼身体，身体垮了什么都没有了，男人女人要对自己好一点；4。努力学习赚钱的本领，钱是一个人活着的根本，是做人的尊严；  </span></strong></span>'
            };

        var mock_replyList = [
                
             ];

        var mock_nameList = [
            {
                "Id": "33333",
                "Name": "郭骥腾",
                "UserName": "yuxin",
                "Dept":
                    {
                        "Id": "bd3474a8-6c2d-43ef-bf42-b06827a216f6",
                        "DeptName": "软件工程",
                        "GroupId": "9ad96dac-88d8-4315-bfdb-9931c8f3cb7c"
                    }
            },
             {
                 "Id": "33333",
                 "Name": "王璐莹",
                 "UserName": "yuxin",
                 "Dept":
                    {
                        "Id": "bd3474a8-6c2d-43ef-bf42-b06827a216f6",
                        "DeptName": "设计",
                        "GroupId": "9ad96dac-88d8-4315-bfdb-9931c8f3cb7c"
                    }
             },

             {
                 "Id": "33333",
                 "Name": "王旭",
                 "UserName": "yuxin",
                 "Dept":
                    {
                        "Id": "bd3474a8-6c2d-43ef-bf42-b06827a216f6",
                        "DeptName": "策划",
                        "GroupId": "9ad96dac-88d8-4315-bfdb-9931c8f3cb7c"
                    }
             },
            {
                "Id": "33333",
                "Name": "陈露",
                "UserName": "yuxin",
                "Dept":
                    {
                        "Id": "bd3474a8-6c2d-43ef-bf42-b06827a216f6",
                        "DeptName": "设计",
                        "GroupId": "9ad96dac-88d8-4315-bfdb-9931c8f3cb7c"
                    }
            },
            {
                "Id": "33333",
                "Name": "张鑫",
                "UserName": "yuxin",
                "Dept":
                    {
                        "Id": "bd3474a8-6c2d-43ef-bf42-b06827a216f6",
                        "DeptName": "设计",
                        "GroupId": "9ad96dac-88d8-4315-bfdb-9931c8f3cb7c"
                    }
            }];

        var mock_nameList1 = [
            {
                "Id": "11111",
                "Name": "马骥腾",
                "UserName": "yuxin",
                "Dept":
                    {
                        "Id": "bd3474a8-6c2d-43ef-bf42-b06827a216f6",
                        "DeptName": "软件工程",
                        "GroupId": "9ad96dac-88d8-4315-bfdb-9931c8f3cb7c"
                    }
            },
             {
                 "Id": "22222",
                 "Name": "陈璐莹",
                 "UserName": "yuxin",
                 "Dept":
                    {
                        "Id": "bd3474a8-6c2d-43ef-bf42-b06827a216f6",
                        "DeptName": "设计",
                        "GroupId": "9ad96dac-88d8-4315-bfdb-9931c8f3cb7c"
                    }
             },
             {
                 "Id": "55555",
                 "Name": "加菲盐",
                 "UserName": "yuxin",
                 "Dept":
                    {
                        "Id": "bd3474a8-6c2d-43ef-bf42-b06827a216f6",
                        "DeptName": "软件工程",
                        "GroupId": "9ad96dac-88d8-4315-bfdb-9931c8f3cb7c"
                    }

             }];

        var mockAccessor = {
            'doReplyTopic': function (topicId, currentUser) {
                replyCompleted(currentUser);
            },
            'doReplySingleMessage': function (topicId, currentUser) {
                replyCompleted(currentUser);
            },
            'getReplyList': function () {
                return mock_replyList;
            },
            'getConfirmNameList': function () {
                return mock_nameList;
            },
            'getNotConfirmNameList': function () {
                return mock_nameList1;
            },

            'getMessage': function () {
                return mock_message;
            },
            'getCurrentUser': function () {
                return mock_currentUser;
            },
            'getBasicInfo': function () {
                g_Var['currentTime'] = Date.fromEpoch(mock_currentTime["CurrentTime"]);
            }

        };


        EzAccessor = mockAccessor;

    } else {
        var realAccessor = {
            'doReplyTopic': function (topicId, currentUser) {
                var replyText = $('#replyContent').val().htmlEncode();
                var topicId = topicId;

                var isReplyToAll = false;
                if ($('#isReplyToAll').attr("checked") == true) {
                    isReplyToAll = true;
                }

                $(document).ajaxBusy('begin');
                $.post(URL_MESSAGE_REPLYTOPIC, {
                    'replyText': replyText,
                    'topicId': topicId,
                    'isReplyToAll': isReplyToAll
                }, function (e) {
                    if (e.State == "Success") {
                        replyCompleted(currentUser);
                    }
                    $(document).ajaxBusy('end');
                });

            },

            'doReplySingleMessage': function (topicId, currentUser) {
                var replyText = $('#replyContent').val().htmlEncode();
                var topicId = topicId;
                var messageId = g_Var['messageId'];

                var isReplyToAll = false;
                if ($('#isReplyToAll').attr("checked") == true) {
                    isReplyToAll = true;
                }

                $.post(URL_MESSAGE_REPLYSINGLEMESSAGE, {
                    'messageId': messageId,
                    'topicId': topicId,
                    'replyText': replyText,
                    'isReplyToAll': isReplyToAll
                }, function (e) {
                    if (e.State == "Success") {
                        //增添留言
                        replyCompleted(currentUser);
                    }
                    $(this).ajaxBusy('end');
                });

            },
            'getReplyList': function () {
                //return <%= ViewData["ReplyList"] %>;
            },
            'getConfirmNameList': function () {
                //return <%= ViewData["ConfirmNameList"] %>;
            },
            'getNotConfirmNameList': function () {
                //return <%= ViewData["NotConfirmNameList"] %>;
            },

            'getMessage': function () {
                //return <%= ViewData["Message"] %>;
            },
            'getCurrentUser': function () {
                //return <%= ViewData["CurrentUser"] %>;
            },
            'getBasicInfo': function () {
                //g_Var['currentTime'] = Date.fromEpoch(<%= ViewData["CurrentTime"] %>);
            }
        }
        EzAccessor = realAccessor;
    }


    ///传入一个ddContainer
    ///返回姓名
    function getName(container) {
        return name = $(container).find('.senderName').text();
    }



    //增添回复内容
    function addReplyDom(messageId, text, replyTime, senderId, senderName, deptName, isHighlight) {
        var replyHtmlStrTpl = '<dd id="{messageId}" style="width:430px; border-bottom: 1px solid #ffffff; margin-left: 10px;">' +
                                  '<div style="float: left;"><img height="48" width="48" src="/core/headicon/{senderId}"></img></div>' +
                                  '<div style=" margin-left: 55px;">' +
                                    '<span class="senderName" style="font-size: 16px; color:#2583AD;">{name}</span>' +
                                    '<span class="deptName">({deptName})</span>' +
                                    '<span style="font-size: 12px; color: Gray;"> {time}</span>' +
                                    '<p class="msgContent" style="font-size: 14px; color: #000000">{message}&nbsp;</p>' +
                                  '</div>' +
                              '</dd>';

        replyHtmlStrTpl = replyHtmlStrTpl.replace("{message}", text)
                                          .replace("{messageId}", messageId)
                                          .replace("{time}", replyTime)
                                          .replace("{name}",
                                           senderName)
                                          .replace("{deptName}", deptName)
                                          .replace('id="undefined"', "")
                                          .replace("{senderId}", senderId);

        var replyHtml = $(replyHtmlStrTpl)
             .appendTo('#replyInfo');


        var btnReplayClick = function () {

            ///获得回复人姓名
            g_Var.toReplyName = getName(replyHtml);
            //获得该回复ID
            g_Var.messageId = $(replyHtml).attr("id");

            var replyMark = "回复" + g_Var.toReplyName + ": ";
            $("#replyContent")
              .val(replyMark)
              .focus();
        };

        //自己发送的回复内容自己不能回复
        if (senderId != g_Var.currentUserID) {
            var replyLink = $('<a class="highlight">回复</a>');
            replyLink.click(btnReplayClick);
            replyHtml.find('.msgContent').append(replyLink);
        }

        if (isHighlight) {
            replyHtml.highlight();
        }

    }



    //增添回复
    function replyCompleted(currentUser) {
        $('#replyContainer').show();
        //传入一个空的messageId
        var messageId;
        var text = $('#replyContent').val().htmlEncode();
        var replyTime = g_Var['currentTime'].toChineseDateFormat() + " " + g_Var['currentTime'].toFullTimeFormat();
        var senderName = currentUser.Name;
        var senderId = currentUser.Id;
        var deptName = currentUser.Dept.DeptName;
        //增添这条回复内容
        addReplyDom(messageId, text, replyTime, senderId, senderName, deptName, true);

        $('#replyContent')
            .clearFields()
            .focus();
    }


    //更新确认名单
    function updateConfirmNameList(currentUser) {
        var userInfo = {};
        userInfo['Id'] = currentUser.Id;
        userInfo['Name'] = currentUser.Name;
        userInfo['Dept'] = {};
        userInfo['Dept']['DeptName'] = currentUser.Dept.DeptName;
        g_Var['confirmNameList'].push(userInfo);
    }



    //更新没有确认名单
    function updateNotConfirmNameList(currentUser) {

        for (var key in g_Var['notConfirmNameList']) {
            if (g_Var['notConfirmNameList'][key].Id == currentUser.Id)
                g_Var['notConfirmNameList'].splice(key);
        }

    }

    ///显示收件人列表
    function showNameList(confirmNameList, notConfirmNameList) {
        $('#tbl_nameList').empty();
        //已确认
        for (var key in confirmNameList) {
            var confirmManDom = '<p>{name}({deptName})</p><p class="cmbConfirmOrNot">已确认收到该消息</p>';
            confirmManDom = confirmManDom.replace("{deptName}", confirmNameList[key].Dept.DeptName)
                                         .replace("{name}", confirmNameList[key].Name);

            $('#tbl_nameList').append(confirmManDom);
        }

        //未确认
        for (var key in notConfirmNameList) {
            var notConfirmManDom = '<p>{name}({deptName})</p><p class="cmbConfirmOrNot">尚未确认收到该消息</p>';
            notConfirmManDom = notConfirmManDom.replace("{deptName}", notConfirmNameList[key].Dept.DeptName)
                                               .replace("{name}", notConfirmNameList[key].Name);

            $('#tbl_nameList').append(notConfirmManDom);
        }


    }



    ///显示消息内容
    function showMessage(messageInfo, currentUser) {
        var time = Date.fromEpoch(messageInfo.CreateOn);
        var CreateOn = time.toChineseDateFormat() + " " + time.toFullTimeFormat();
        var deptName = messageInfo.SenderUser.Dept.DeptName;
        var senderName = messageInfo.SenderUser.Name;
        var userId = messageInfo.SenderUser.Id;
        var userPhoto = '<img height="48" width="48" src="/core/headicon/{userId}"></img>';
        userPhoto = userPhoto.replace("{userId}", userId);


        $('#messageTitle').html(messageInfo.Title);
        $('#sendName').html(senderName);
        $('#deptName').html("(" + deptName + ")");
        $('#sendTime').html(CreateOn);
        $('#messageContent').html(messageInfo.Text);
        $('#avatar').html(userPhoto);

        $('#pNeedConfirm').hide();
        if (currentUser.Id != messageInfo.SenderUser.Id && messageInfo.NeedConfirm) {
            if (!messageInfo.HasConfirmed) {
                $('#pNeedConfirm').show();
            }
        }
    }




    ///显示回复列表
    function showReply(replyList) {

        if (replyList.length == 0) {
            $('#replyContainer').hide();
        } else {
            for (var key in replyList) {
                var time = Date.fromEpoch(replyList[key].CreateOn);
                var replyTime = time.toChineseDateFormat() + " " + time.toFullTimeFormat();
                var senderName = replyList[key].SenderUser.Name;
                var senderId = replyList[key].SenderUser.Id;
                var deptName = replyList[key].SenderUser.Dept.DeptName;
                var messageId = replyList[key].MessageId;
                var text = replyList[key].Text;

                addReplyDom(messageId, text, replyTime, senderId, senderName, deptName);
            }
        }

    }



    //验证回复内容是否为空
    function isEmpty(str) {
        if (str.trim() == "") {
            var stateInfo = { 'State': 'Error', 'Info': '回复不能为空!', 'Date': null };
            $.displayStateInfo(stateInfo);

            return true;
        }
        return false;
    }


    function initTime() {
        $(this).ajaxBusy();
        EzAccessor.getBasicInfo();
        var updateCurrentDateTime = function () {
            //从后台接受时间数
            var date = g_Var['currentTime'].toFullChineseDateFormat();
            var time = g_Var['currentTime'].toFullTimeFormat();


        }

        var refreshCurrentTime = function () {
            // 时间加1
            g_Var['currentTime'] = new Date(
				g_Var['currentTime'].getFullYear(),
				g_Var['currentTime'].getMonth(),
				g_Var['currentTime'].getDate(),
				g_Var['currentTime'].getHours(),
				g_Var['currentTime'].getMinutes(),
				g_Var['currentTime'].getSeconds() + 1
				);

            updateCurrentDateTime();
        }

        refreshCurrentTime();
        setInterval(refreshCurrentTime, 1000);
    }




    function initPageEvent() {

        var currentUser = EzAccessor.getCurrentUser();
        var message = EzAccessor.getMessage();

        $('#btnSubmit').click(function () {

            var replyContent = $('#replyContent').val();
            var toReplyString = "回复" + g_Var.toReplyName + ":";
            var isReplayToSingle = replyContent.startWith(toReplyString);

            var msgIsEmptyOrNot = isEmpty(replyContent);

            if (!msgIsEmptyOrNot) {
                //是回复给单个人
                if (g_Var.toReplyName && isReplayToSingle) {

                    EzAccessor.doReplySingleMessage(message.Id, currentUser);
                }
                else {

                    EzAccessor.doReplyTopic(message.Id, currentUser);
                }
            }

        });

        $('#btnConfirmMessage').click(function () {
            var topicId = message.Id;

            window.location.href = '/meesage/confirmMessage?topicId=' + topicId;
        });
    }




    function initPage() {
        var messageInfo = EzAccessor.getMessage();
        var curretnUser = EzAccessor.getCurrentUser();
        var replyList = EzAccessor.getReplyList();
        g_Var.currentUserID = curretnUser.Id;

        if (messageInfo.NeedConfirm) {
            EzTipsManager.addTipBox('#tip_HasConfirmed', 'tipHasConfirmed');
            EzTipsManager.addTipBox('#tip_nameList', 'tipNameList');
            EzTipsManager.showTipBox('tipNameList');


            if (messageInfo.HasConfirmed) {
                EzTipsManager.showTipBox('tipHasConfirmed');

            }

            g_Var.confirmNameList = EzAccessor.getConfirmNameList();
            g_Var.notConfirmNameList = EzAccessor.getNotConfirmNameList();

            showNameList(g_Var.confirmNameList, g_Var.notConfirmNameList);

        }

        showMessage(messageInfo, curretnUser);
        showReply(replyList);

    }


    $(function () {

        initPage();
        initPageEvent();
        initTime();

    });
    
</script>
<!-- InstanceEndEditable -->
<body>
    <div id="root">
        <div id="headw">
            <div id="head">
                <!-- InstanceBeginEditable name="pageHead" -->
                <p>
                    早上好，杨裕欣(软件工程部)
                </p>
                <div id="status-bar">
                    <span><a href="#">设置</a></span>&nbsp; 魏玛软件出品
                </div>
                <!-- InstanceEndEditable -->
            </div>
        </div>
        <div id="main">
            <div id="contentw">
                <div id="content-page">
                    <!-- InstanceBeginEditable name="pageContent" -->
                    <div id="page-head">
                        <p id="pNeedConfirm">
                            <span>您尚未确认收到该消息</span> <a id="btnConfirmMessage" style="color: Blue; font-size: 18px;">
                                立即确认</a>
                        </p>
                        <div>
                            <span id="avatar"></span> <span id="sendName" style="font-size: 16px; color: #2583AD;">
                            </span><span id="deptName"></span><span id="sendTime" style="color: Gray;"></span>
                            <span id="mark"></span>
                        </div>
                    </div>
                    <div id="page-body">
                        <div>
                            <div>
                                <span id="messageTitle" style="font-size: 22px;"></span>
                            </div>
                            <div id="messageContent" style="font-size: 16px;">
                            </div>
                        </div>
                        <div id="replyContainer" style="margin: 10px 0px 0px 5px;">
                            <hr />
                            <dl id="replyInfo">
                            </dl>
                        </div>
                        <hr />
                        <div id="textInfo" style="margin-top: 20px">
                            <textarea id="replyContent" rows="5" style="margin-left: 20px; width: 450px" name="p_replyContentContent"></textarea>
                        </div>
                    </div>
                    <div class="page-submit">
                        <input type="button" id="btnSubmit" value="回复" />
                        <label id="lblClicked" for="isReplyToAll">
                            <input type="checkbox" id="isReplyToAll" />回复所有人
                        </label>
                    </div>
                    <!-- InstanceEndEditable -->
                </div>
                <div id="content-foot">
                    <small>这个是内容下面的脚注</small></div>
            </div>
            <div id="tipsw">
                <!-- InstanceBeginEditable name="pageShortcut" -->
                <div id="shortcuts" class="box">
                    <a class="btn-shortcut" href="/message/send">写新消息</a>
                </div>
                <!-- InstanceEndEditable -->
                <div id="tips" class="box">
                </div>
            </div>
            <div class="clearfloat">
            </div>
        </div>
    </div>
    <!-- InstanceBeginEditable name="pageFoot" -->
    <div id="tip_HasConfirmed" style="display: none;" class="tip-info">
        <h1>
            您已经确认过该消息</h1>
    </div>
    <div id="tip_nameList" style="display: none;">
        <h1>
            该消息发送给:</h1>
        <div id="tbl_nameList">
        </div>
    </div>
    <!-- InstanceEndEditable -->
</body>
<!-- InstanceEnd -->
</html>
